<template>
	<view>
		<!--搜索-->
		<view class="search_con" @click="funHref('/pages/product/search')">
			<i class="iconfont icon-sousuo"></i><text>{{$t('search_alert')}}</text>
		</view>
		<!--分类-->
		<view class="type_con">
			<view class="type_left">
				<text v-for="(item,index) in list_left" :key="index" :class="index==index_left?'active':''"
					@click="funChoiceType(index)">{{item.pt_title}}</text>
			</view>
			<view class="type_right">
				<view class="ptcon">
					<view v-for="(item,index) in list_right" :key="index" :class="index==index_right?'active':''"
						@click="funChoicePtype(index)">
						{{item.pt_title}}
					</view>
				</view>
				<view class="product_list">
					<view class="con" v-for="(item,index) in list_pro" :key="index"
						@click="funHref('/pages/product/detail?pro_id='+item.pro_id)">
						<image :src="item.pro_imgs" mode="widthFix"></image>
						<view class="imp">
							<text>{{item.pro_title}}</text>
							<view class="price">
								￥{{item.pro_price.toFixed(2)}}<i>￥{{item.pro_marketPrice.toFixed(2)}}</i></view>
						</view>
					</view>
				</view>
				<!--加载更多-->
				<view class="load_more" v-if="list_pro.length>0" @click="funLoadMore">
					{{$t('load_more')}}
				</view>
				<!--空信息-->
				<view class="nodata_con" v-if="isLoading==false&&list_pro.length<=0">
					<label class="iconfont icon-meiyoushuju"></label>
					<text>{{$t('no_data')}}</text>
				</view>
			</view>
		</view>
		<!--刷新-->
		<view class='loadind_con' v-if="isLoading">
			<view class="loading">
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
				<view class="loading-bar"></view>
			</view>
		</view>
		<!--客服按钮-->
		<view class="kefu_btn" @click="funHref('/pages/chatroom/chatroom')">
			<text class="gui-footer-icon-buttons-icon gui-block-text gui-icons">&#xe626;</text>
			<text class="gui-footer-icon-buttons-text gui-block-text gui-icons">{{$t('give_service')}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imageUrl: '',
				isLoading: true, //是否正在加载
				list_left: [{
					pt_id: 0,
					pt_title: this.$t('hot')
				}], //左侧类别
				index_left: 0, //选中
				list_right: [], //右侧类别
				index_right: 0, //选中
				list_pro: [], //产品
				index: 1, //页码
			}
		},
		onReady() {
			uni.setTabBarItem({
				index: 0,
				text: this.$t('home')
			});
			uni.setTabBarItem({
				index: 1,
				text: this.$t('type')
			});
			uni.setTabBarItem({
				index: 2,
				text: this.$t('cart')
			});
			uni.setTabBarItem({
				index: 3,
				text: this.$t('member')
			});
			
			uni.setNavigationBarTitle({
				title: this.$t('type')
			})
		},
		onLoad() {
			var _this = this;
			_this.imageUrl = _this.webImageUrl;

			//一级分类
			_this.fun_request("/Api/ProductType/GetList", {
				pt_level: 3
			}, function(res) {
				_this.list_left = _this.list_left.concat(res.data);

				//读取热门
				_this.fun_request("/Api/ProductType/GetList", {
					pt_isHot: 1
				}, function(res2) {
					_this.list_right = res2.data;

					//加载第一项
					_this.index_right = 0;
					_this.getLoadProduct();
				});
			});
		},
		methods: {
			//左侧选择
			funChoiceType: function(index) { 
				var _this = this;
				_this.index_left = index;
				_this.index = 1;
				_this.list_pro = [];
				_this.isLoading = true;

				_this.getLoadType();
			},
			//右侧选择
			funChoicePtype(index) {
				var _this = this;
				_this.index_right = index;
				_this.isLoading = true;

				_this.getLoadProduct();
			},
			//加载右侧分类
			getLoadType: function() { 
				var _this = this;

				var param = {};
				if (_this.index_left == 0) param.pt_isHot = 1;
				else param.pt_pid = _this.list_left[_this.index_left].pt_id;

				_this.fun_request("/Api/ProductType/GetList", param, function(res) {
					_this.list_right = res.data;

					//加载第一项
					_this.index_right = 0;
					_this.getLoadProduct();
				});
			},
			//加载产品
			getLoadProduct() { 
				var _this = this;

				_this.fun_request("/Api/Product/GetPageList", {
					index: _this.index,
					size: 10,
					count: 10,
					pt_id: _this.list_right.length > 0 ? _this.list_right[_this.index_right].pt_id : _this
						.list_left[_this.index_left].pt_id
				}, function(res) {
					var _list = res.data;
					_this.fun_map(_list, function(i, item) {
						if (item.pro_imgs) {
							item.pro_imgs = item.pro_imgs.split(',')[0].replace('/Upload',
								'/upload/100');
						}
					});
					_this.list_pro = _this.list_pro.concat(_list);
					//加载完成
					_this.isLoading = false;
				});
			},
			//加载更多
			funLoadMore: function() {
				var _this = this;
			
				_this.index = _this.index + 1;
				_this.isLoading = true;
				_this.getLoadProduct();
			},
			//跳转
			funHref: function(url) { 
				this.fun_navigateTo(url);
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F7F7F7;
		padding-top: 0;
	}
	
	.search_con {
		display: flex;
		flex-direction: row;
		overflow: hidden;
	
		text {
			flex: 1;
		}
	}
	
	.type_con {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 20rpx;
		padding: 110rpx 0 0;
	}

	.type_left {
		float: left;
		width: 22%;
		height: 100%;
		background-color: #f8f8f8;
		overflow-y: auto;

		text {
			float: left;
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
			font-size: 28rpx;
			margin: 10rpx 0;
			border-left: 8rpx solid #f8f8f8;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		text.active {
			border-left: 8rpx solid #F85F69;
			color: #F85F69;
			font-weight: bold;
			font-size: 30rpx;
		}
	}


	.type_right {
		float: right;
		width: 78%;
		height: 100%;
		background-color: #f8f8f8;
		padding: 0 3%;
		overflow-x: auto;
		position: relative;

		.ptcon {
			width: 100%;
			overflow: hidden;

			view {
				float: left;
				border: 1rpx solid #ccc;
				border-radius: 10rpx;
				padding: 10rpx 20rpx;
				font-size: 28rpx;
				margin: 0 15rpx 15rpx 0;
			}

			view.active {
				border-color: #F85F69;
				background-color: #F85F69;
				color: #fff;
			}
		}
	}

	.type_type {
		display: block;
		width: 100%;
		background-color: #fff;
		border-radius: 15rpx;
		overflow: hidden;
		margin-bottom: 30rpx;
		padding: 30rpx 0 40rpx;

		view.title {
			display: block;
			width: 100%;
			font-size: 30rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
			margin-bottom: 5rpx;
		}

		view.con {
			float: left;
			width: 33.3333%;
			text-align: center;
			margin-top: 30rpx;

			image {
				display: block;
				margin: 0 auto 10rpx;
				width: 80rpx;
				height: 80rpx;
			}

			text {
				font-size: 28rpx;
				color: #666;
			}
		}
	}

	.product_con {
		width: 100%;
		padding: 50rpx 0 10rpx;
	}
</style>
